<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="employeetype"
          label="人才类型"
          :formatter="talentType"
          width="180">
      </el-table-column>
      <el-table-column
          prop="satisfy"
          label="满足率"
          width="180">
      </el-table-column>
      <el-table-column
          prop="changereason"
          label="变动原因">
      </el-table-column>
      <el-table-column
          prop="creatdate"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="state"
          :formatter="stateType"
          label="审批状态">
      </el-table-column>
      <el-table-column
          prop="comparison"
          :formatter="comparisonType"
          label="变动状态">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">审批</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table
        :data="needTable"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="need"
          label="急需人才类型"
          :formatter="needType"
          width="180">
      </el-table-column>
      <el-table-column
          prop="quantity"
          label="急需人才数量"
          width="180">
      </el-table-column>
      <el-table-column
          prop="creatdate"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column
          prop="state"
          :formatter="stateType"
          label="审批状态">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="jixuClick(scope.row)" type="text" size="small">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ApprovalAdd",
  methods: {
    tableRowClassName({row, rowIndex}) {
        return 'warning-row';
    },
    talentType:function (row, column, cellValue){
      if (cellValue == "1"){
        return '普通工人'
      }
      if (cellValue == "2"){
        return '技术人才'
      }
      if (cellValue == "3"){
        return '高端人才'
      }
      if (cellValue == "4"){
        return '急需人才'
      }
    },
    stateType :function (row, column, cellValue){
      if (cellValue == "1"){
        return '待审批'
      }
      if (cellValue == "2"){
        return '通过'
      }
      if (cellValue == "3"){
        return '未通过'
      }
    },
    comparisonType:function (row, column, cellValue){
      if (cellValue == "1"){
        return '上升'
      }
      if (cellValue == "2"){
        return '下降'
      }
      if (cellValue == "3"){
        return '不变'
      }
    },
    needType:function (row, column, cellValue){
      if (cellValue == "1"){
        return '普通工人'
      }
      if (cellValue == "2"){
        return '技术人才'
      }
      if (cellValue == "3"){
        return '高端人才'
      }
    },
    handleClick(row) {
      this.$router.push('/approvalSelect?id='+row.id)
    },
    jixuClick(row){
      this.$router.push('/approvalNeed?id='+row.id)
    }
  },
  data() {
    return {
      tableData: [],
      needTable: [],
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:8081/talent/findAll').then(function (resp){
      console.log(resp.data)
      _this.tableData = resp.data
    })
    axios.get('http://localhost:8081/talent/findTalent4').then(function (resp){
      _this.needTable = resp.data
    })
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>